<template>
    <div class='recommend playList'>
      <div class="comlist recommend-list ">
        <mu-flexbox wrap='wrap' justify="space-around" :gutter="0">
          <mu-flexbox-item basis="40%" class="item" :key="item.id" v-for='item in playList' >
            <router-link :to="{name:'playListDetail',params: { id:item.id,name:item.name,coverImg: item.coverImgUrl, creator: item.creator, count: item.playCount, desc: item.description}}" class="tosong">
              <div class="listbar">{{item.playCount|total}}</div>
              <img v-lazy="item.coverImgUrl" lazy="loading" alt="">
              <div class="bottomname">{{item.name}}</div>
            </router-link>
          </mu-flexbox-item>
        </mu-flexbox>
        <mu-infinite-scroll :scroller="scroller" :loading="loading" @load="loadMore"/>
      </div>
    </div>
</template>
<script>
import api from '../api/api.js'
    export default{
        data(){
            return{
                scroller: null,
                playList:[],
                offset: 0,
                loading: false
            }
        },
        created(){
            this.get();
        },
        mounted () {
            this.scroller = this.$el
        },
        methods:{
            get(){
                this.loading = true
                this.$http.get(api.getPlayListByWhere('全部', 'hot', this.offset, true, 6)).then((res) => {
                    var total = res.data.total
                    var playList = res.data.playlists
                    this.playList.push(...playList)
                    this.offset = this.offset + 6
                    if (this.offset > total) 
                    this.offset = total
                    this.loading = false
                })
            },
            loadMore(){
                this.get()
            }
        },
        filters:{
            total(n){
                if(n<9999){
                    return n
                }
                else{
                    return (n/10000).toFixed(0)+'万'
                }
            }   
        }
    }
</script>
<style lang="less" scoped>
   
  .recommend{
    width: 100%;
    padding:0 10px;
    height: 28rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 5px;
    .recommend-song{
      background: url("../assets/images/recommend.png") no-repeat left center;
      background-size: 20px 20px;
    }
    .item{
      position: relative;
      margin: 0 5px 5px 10px;
      height: 100%;
    }
    .tosong{
      width: 100%;
      color: rgba(0,0,0,0.8);
      .listbar{
        width: 100%;
        background: rgba(0,0,0,0.2);
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        text-align: right;
        padding: 2px 5px;
      }
      img{
        min-height: 5rem;
        min-width: 5rem;
        height: auto;
        max-width: 100%;
        width: 8rem;
        height: 8rem;
      }
      img[lazy=loading] {
        background: url('../assets/images/default_cover.png') no-repeat;
        background-size: cover;
      }
      .bottomname{
            overflow: hidden;
          font-size: 12px;
          height: 1.7rem;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
      }
    }
  }
</style>
